$(function () {
    // tab切换栏
    $(".detailInfo .title").on("click", "li", function () {
        // console.log(111);
        $(this).addClass("active").siblings().removeClass("active").parent().siblings("ol").children().eq($(this).index()).addClass("active").siblings().removeClass("active");
    })
})

// 放大镜效果
var midbox = document.querySelector(".middle");
var mask = document.querySelector(".mask");
var smallbox = document.querySelector(".small");
var midImg = document.querySelector(".middle img");
var bigbox = document.querySelector(".big");
var smallimg = document.querySelectorAll(".small img");
var bigimg = document.querySelector(".big img");
var box = document.querySelector(".imgInfo");
midbox.onmouseover = function () {
    mask.style.display = "block";
    bigbox.style.display = "block";
    mask.onmousemove = function (e) {
        var e = e || window.event;
        // 获取元素的坐标
        var x = e.pageX - box.offsetLeft - this.clientWidth / 2;
        var y = e.pageY - box.offsetTop - this.clientHeight / 2;
        // console.log(x,y);
        if (x < 0) {
            x = 0;
        }
        if (y < 0) {
            y = 0
        }
        if (x > midbox.clientWidth - mask.clientWidth) {
            x = midbox.clientWidth - mask.clientWidth;
        }
        if (y > midbox.clientHeight - mask.clientHeight) {
            y = midbox.clientHeight - mask.clientHeight;
        }
        mask.style.left = x + "px";
        mask.style.top = y + "px";

        // 大图片的移动
        // 移动的比例
        var xpercent = x / midbox.clientWidth;
        var ypercent = y / midbox.clientHeight;
        // 大图的移动

        var bx = parseInt(getComputedStyle(bigimg).width) * xpercent;
        var by = parseInt(getComputedStyle(bigimg).height) * ypercent;

        bigimg.style.left = -bx + "px";
        bigimg.style.top = -by + "px";

    }
}
midbox.onmouseout = function () {
    mask.style.display = "none";
    bigbox.style.display = "none"
}
for (let i = 0; i < smallimg.length; i++) {
    smallimg[i].onclick = function () {
        for (var j = 0; j < smallimg.length; j++) {
            smallimg[j].className = "";
        }
        smallimg[i].className = "current";
        var path = this.getAttribute("src");
        // console.log(path);
        var index = path.indexOf(".");
        var suffix = path.substring(index - 1);
        // console.log(suffix);
        midImg.src = "img/middle" + suffix;
        bigimg.src = "img/middle" + suffix;
    }

}

// 从列表页获取对应的信息显示在详情页
// 获取列表页对应信息的id
var param = location.search;
var reg = /id=(\d+)/;
var arr = reg.exec(param);
// console.log(arr);
if (!arr) {
    location.href = "error.html";
} else {
    var id = arr[1];
}
// console.log(id);
$.ajax({
    url: "./serve/detail.php",
    data: { id: id },
    type: "post",
    dataType: "json",
    success: function (res) {
        // console.log(res);
        var { meta: { status, msg }, data } = res;
        if (status == 101) {
            $(".choseInfo .title h1").text(data.name);
            $(".choseInfo .single span.surprice").text("￥" + data.price + "元");
        } else {
            location.href = "error.html";
        }
    }
})

var username = getCookie("username");
var li = document.querySelector(".header-con li:first-child");
// console.log(li);
if (username) {
    li.innerHTML = "";
    var str = `
            欢迎${username}光临
            <a href="javascript:;" class="del">退出</a>
    `;
    li.innerHTML = str;
    var del = document.querySelector(".del");
    del.onclick = function () {
        removeCookie("username");
        li.innerHTML = "";
        var str = `
            <a href="login.html" id="login">登陆</a>
            <a href="register.html" id="register">注册</a>
        `;
        li.innerHTML = str;
    }
}

// 加入购物车
var addCar = document.querySelector(".add_car");
addCar.onclick = function () {
    if (username) {
        var data = localStorage.getItem("goods");
        if (!data) {
            // 说明没有此类数据
            data = [];
            var goods = {
                goodsid: id,
                number: 1,
                username: username
            }
            data.push(goods);
            localStorage.setItem("goods", JSON.stringify(data));
        } else {
            // 执行这里说明已经有数据了
            data = JSON.parse(data);
            // console.log(data);
            // 找到对应用户对应商品加入购物车的数据
            var index = data.findIndex(ele => ele.goodsid == id && ele.username == username);
            if (index > -1) {
                data[index].number++;
                localStorage.setItem("goods", JSON.stringify(data))
            } else {
                var goods = {
                    goodsid: id,
                    number: 1,
                    username: username
                }
                data.push(goods);
                localStorage.setItem("goods", JSON.stringify(data));
            }
        }
        alert("添加购物车成功！")
    } else {
        alert("请先登录才能加入购物车！！");
        return false;
    }
}

